<template>
  <!-- 有子菜单的情况 -->
  <el-sub-menu v-if="hasChildren" :index="menu.menuPath || menu.id.toString()">
    <template #title>
      <el-icon v-if="menu.menuIcon">
        <component :is="getIconComponent(menu.menuIcon)" />
      </el-icon>
      <span>{{ menu.menuName }}</span>
    </template>
    <DynamicMenu
      v-for="child in menu.children"
      :key="child.id"
      :menu="child"
    />
  </el-sub-menu>

  <!-- 普通菜单项 -->
  <el-menu-item v-else :index="menu.menuPath">
    <el-icon v-if="menu.menuIcon">
      <component :is="getIconComponent(menu.menuIcon)" />
    </el-icon>
    <span>{{ menu.menuName }}</span>
  </el-menu-item>
</template>

<script setup>
import { computed } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const props = defineProps({
  menu: {
    type: Object,
    required: true
  }
})

// 判断是否有子菜单
const hasChildren = computed(() => {
  return props.menu.children && props.menu.children.length > 0
})

// 获取图标组件
const getIconComponent = (iconName) => {
  if (!iconName) return null
  
  // 处理各种图标名称格式
  // 例如: UserFilled, el-icon-user, user-filled
  let componentName = iconName
  
  // 移除 el-icon- 前缀
  if (componentName.startsWith('el-icon-')) {
    componentName = componentName.replace('el-icon-', '')
  }
  
  // 转换为帕斯卡命名 (user-filled -> UserFilled)
  componentName = componentName.split('-')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join('')
  
  // 返回对应的Element Plus图标组件
  return ElementPlusIconsVue[componentName] || ElementPlusIconsVue['Menu']
}
</script>



